<template>
  <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000" v-if="recommend && recommend.length > 0">
    <van-swipe-item v-for="item in recommend" :key="item.did" class="swipe-item">
      <img :src="getProxyImageUrl(item.pic)" @click="gotoCover(item.did)" />
      <!-- <img :src="item.pic" /> -->
    </van-swipe-item>
  </van-swipe>
</template>
<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import { computed } from 'vue'
const props = defineProps(['recommend'])
const recommend = computed(() => props.recommend);
import { useRouter } from 'vue-router'
const router = useRouter()

const gotoCover = (id) => {
  router.push({ path: `/comicCover/${id}` })
};



</script>
<style scoped>
.my-swipe {
  position: relative;
}

.swipe-item {
  overflow: hidden;
}

.swipe-item img {
  width: 100%;
  object-fit: cover;
  height: 300px;
  display: block;
}
</style>
